<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-百度音乐盒</title>
    <style>
      h2 {
        margin: 0 0 10px;
      }

      .main {
        width: 300px;
        margin: 30px auto;
        border: 1px solid #ccc;
        padding: 10px 20px;
      }
    </style>

    <script>
        window.onload = function () {
          // 全选
            let btnEle1 = document.getElementById("btn1");
              btnEle1.onclick = function () {
              let childrens = document.getElementById("box").children;
              for (let i = 0; i < childrens.length; i++) {
                  let child = childrens[i];
                  child.checked = true;
              }
            }
          // 全选
          let btnEle2 = document.getElementById("btn2");
          btnEle2.onclick = function () {
            let childrens = document.getElementById("box").children;
            for (let i = 0; i < childrens.length; i++) {
              let child = childrens[i];
              child.checked = false;
            }
          }
          // 全选
          let btnEle3 = document.getElementById("btn3");
          btnEle3.onclick = function () {
            let childrens = document.getElementById("box").children;
            for (let i = 0; i < childrens.length; i++) {
              let child = childrens[i];
              child.checked = !child.checked;
            }
          }
          // 全选
          let btnEle4 = document.getElementById("btn4");
          btnEle4.onclick = function () {
            let sum = [];
            let childrens = document.getElementById("box").children;
            let musicArr = ["爱你一万年", "北京 北京", "海阔天空", "老司机等等我", "蓝精灵", "猴哥", "一路上有你", "至少还有你", "十年", "童话", "死了都要爱"];
            for (let i = 0; i < childrens.length; i++) {
              let child = childrens[i];
              if (child.checked){
                sum.push(child.value);
              }
            }
            for (let i = 0; i < sum.length; i++) {
              if (sum[i] === undefined){
                sum.splice(i,1);
                i--;
              }
            }
              for (let i = 0; i < sum.length; i++) {
                  console.log("正在播放" + musicArr[sum[i]]);
              }
          }
        }
    </script>
</head>
<body>
<div class="main">
  <h2>百度音乐盒</h2>
  <input type="button" id="btn1" value="全选">
  <input type="button" id="btn2" value="全否">
  <input type="button" id="btn3" value="反选">
  <input type="button" id="btn4" value="播放">
  <hr>
  <div id="box">
    <input type="checkbox" name="music" value="0"> 爱你一万年 <br>
    <input type="checkbox" name="music" value="1"> 北京 北京 <br>
    <input type="checkbox" name="music" value="2"> 海阔天空 <br>
    <input type="checkbox" name="music" value="3"> 老司机等等我 <br>
    <input type="checkbox" name="music" value="4"> 蓝精灵 <br>
    <input type="checkbox" name="music" value="5"> 猴哥 <br>
    <input type="checkbox" name="music" value="6"> 一路上有你 <br>
    <input type="checkbox" name="music" value="7"> 至少还有你 <br>
    <input type="checkbox" name="music" value="8"> 十年 <br>
    <input type="checkbox" name="music" value="9"> 童话 <br>
    <input type="checkbox" name="music" value="10"> 死了都要爱 <br>
  </div>
</div>
</body>
</html>